<template>
  <div>
    <vxe_table
      :options="options"
      @handleTableBtn="handleTableBtn"
      ref="baseTable"
    >
      <template #btn> </template>
    </vxe_table>
    <!-- <TiaoGuang ref="TiaoGuang"></TiaoGuang>
    <Jixie ref="Jixie"></Jixie> -->
    <Info ref="Info"></Info>
    <Yhinfo ref="Yhinfo"></Yhinfo>
    <MapLine ref="MapLine"></MapLine>
    <CmdDialog ref="CmdDialog"></CmdDialog>
    <CmdChannel ref="CmdChannel"></CmdChannel>
  </div>
</template>

<script>
import vxe_table from "@/components/table/vxe_table.vue";
import tableMixin from "@/mixins";
import { hasBtnAuth, parseTime } from "@/utils";
import {
  getDeviceInfo,
  getDeviceInfoHY,
  getDeviceList,
  sendSearchcmd,
  trajectory,
} from "@/api/device";
import Info from "./comps/info.vue";
import { Message } from "element-ui";
import Yhinfo from "./comps/yhinfo.vue";
import MapLine from "./comps/mapLine.vue";
import CmdDialog from "./comps/cmd-dialog.vue";
import CmdChannel from "./comps/cmd-channel.vue";
export default {
  mixins: [tableMixin],
  components: {
    vxe_table,
    Info,
    Yhinfo,
    MapLine,
    CmdDialog,
    CmdChannel,
  },
  data() {
    return {
      options: {
        id: "usertable",
        apiFn: getDeviceList,
        columns: [
          {
            field: "imei",
            title: "设备号",
            search: true,
            valueType: "input",
          },

          {
            field: "brand",
            title: "品牌",
          },

          { field: "osVer", title: "版本" },
          { field: "model", title: "型号" },
          // { field: "lat", title: "纬度" },
          // { field: "lng", title: "经度" },
          // { field: "chModeMax", title: "通道模式", width: 100 },
          // {
          //   field: "dmModeMax",
          //   title: "调光模式",
          //   type: "html",
          //   width: 100,
          //   formatter: ({ row }) => {
          //     return ["Stan", "Off", "Fast", "Slow"][row.dmModeMax];
          //   },
          // },
          // {
          //   field: "dmCurvMax",
          //   title: "调光曲线",
          //   type: "html",
          //   width: 100,
          //   formatter: ({ row }) => {
          //     return ["L", "E", "S", "RE"][row.dmCurvMax];
          //   },
          // },
          // {
          //   field: "dmFreqMax",
          //   title: "调光频率",
          //   type: "html",
          //   width: 100,
          //   formatter: ({ row }) => {
          //     return ["4K", "10K", "20K", "40K"][row.dmFreqMax];
          //   },
          // },
          // {
          //   field: "fanModeMax",
          //   title: "风机模式",
          //   type: "html",
          //   width: 100,
          //   formatter: ({ row }) => {
          //     return ["Stan", "Quie", "Of"][row.fanModeMax];
          //   },
          // },
          // { field: "chModeDesc", title: "通道模式描述" },
          {
            field: "state",
            title: "设备状态",
            type: "html",
            formatter: ({ row }) => {
              if (row.state) {
                return "<span style='color:green'>在线</span>";
              } else {
                return "<span style='color:red'>离线</span>";
              }
            },
          },
          {
            field: "createTime",
            title: "时间",
            type: "html",
            formatter: ({ row }) => parseTime(row.createTime),
          },
        ],
        btnWidth: 550,
        btn: [
          // {
          //   title: "调光控制",
          //   handleName: "handleOpentg",
          //   // show: (row) => hasBtnAuth("btn_device_tg"),
          // },
          // {
          //   title: "机械控制",
          //   handleName: "handleOpenjx",
          //   // show: (row) => hasBtnAuth("btn_device_jx"),
          // },
          {
            title: "通道控制",
            handleName: "handleOpenChannel",
          },
          {
            title: "命令控制",
            handleName: "handleOpenCmd",
          },
          {
            title: "状态信息",
            handleName: "handleInfo",
            type: "info",
          },
          {
            title: "合宇信息",
            handleName: "handleInfoHY",
            type: "success",
          },
          {
            title: "轨迹",
            handleName: "handleLine",
            type: "warning",
          },
        ],
      },
    };
  },

  methods: {
    handleADD() {
      this.$refs.addDialog.open();
    },
    handleOpentg(row) {
      this.$refs.TiaoGuang.open(row);
    },
    handleOpenjx(row) {
      this.$refs.Jixie.open(row);
    },
    handleInfo(row) {
      this.$refs.Info.open(row);
    },
    async handleSearch(row) {
      const res = await sendSearchcmd({ imei: row.imei });
      if (!res.status) {
        Message.success("发送成功");
      }
    },
    async handleInfoHY(row) {
      const res = await getDeviceInfoHY({ imei: row.imei });
      this.$refs.Yhinfo.open(JSON.stringify(res.content));
    },
    async handleLine(row) {
      const res = await trajectory({ imei: row.imei });
      if (!res.status) {
        this.$refs.MapLine.open(row, res.content);
      }
    },
    handleOpenCmd(data) {
      this.$refs.CmdDialog.open(data, data.chModeDesc);
    },
    handleOpenChannel(data) {
      this.$refs.CmdChannel.open(data);
    },
  },
};
</script>
